<template>
	<view>
		<view class="uni-list">
			<view class="uni-list-cell" v-for="(item,index) in news" :key="index"  
			:data-newsid="item.newsid">
				<view class="uni-media-list">					
					<view class="uni-media-list-body">
						<view class="listContent" hover-class="uni-list-cell-hover" @tap="openinfo" :data-newsid="item.newsid">
							<view class="uni-media-list-text-top titleText">{{item.title}}</view>
							<view class="uni-flex uni-ellipsis">
							  <view class="infoText2">
								计划投资：{{item.monthCumulativeInvestment}} 
							  </view>
							  <view class="infoText2">完成进度:{{item.rate}}</view>
							</view>
						</view>
						<view class="imgView uni-flex">
							<view class="imgBox" v-for="(imgItem,index) in imgArr" :key="index"> 
								<image :src="imgItem.src" @click="previewImage(index)"></image>
							</view>
						</view>
						<view class="btomFont">
							<view class="btomFont_one" @tap="goJk" :data-newsid="item.newsid">
								<image class="jiankongFont"  v-if="item.isMonitor==1" src="../../static/icon/icon-2.png"></image>
								<image class="jiankongFont" v-else src="../../static/icon/icon.png"></image>
								<view :class="{btomActive:item.isMonitor==1}">监控</view>
							</view>
							<view class="btomFont_one" @click="focusOn" :data-newsid="item.newsid" :data-isCare="item.isCare">
								<image class="jiankongFont"  v-if="item.isCare==1" src="../../static/icon/icon-3.png"></image>
								<image class="jiankongFont" v-else src="../../static/icon/icon-1.png"></image>
								<view :class="{btomActive:item.isCare==1}">关注</view>
							</view>
							<view class="btomFont_one" @click="viewMap" :data-newsid="item.newsid">
								<image class="jiankongFont"  v-if="item.bw!=null" src="../../static/icon/icon-5.png"></image>
								<image class="jiankongFont" v-else src="../../static/icon/icon-4.png"></image>
								<view :class="{btomActive:item.bw!=null}">地图</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"projItem",
		props:{
			news:{
				type: Object,
				default: function(e) {
				  return {}
				}
			}
		},
		data(){
			return {
				
			}
		},
		onLoad() {
			
		},
		methods:{
			
		}
	}
</script>

<style>
	.uni-list-cell{
			border-bottom: solid #F5F6F7 10px;
		}
		.titleText{
			color: #28435D;
			font-size: 16px;
			line-height: 21px;
		}
		.infoText2{
			color: #93A0AD;
			font-size: 14px;
			line-height: 28px;
		}
		.infoText2:nth-child(2){
			margin-left: 20px;
		}
		.imgView{
			width: 100%;
			height: 90px;
			padding-bottom: 12px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
		}
		.imgBox{
			width: 30%;
			height: 78px;
		}
		.imgBox image{
			width: 100%;
			height: 78px;
		}
	.uni-media-list-body{height: auto;}
	.uni-media-list-text-top{line-height:1.6em;}
	.btomFont{
			width: 100%;
			height: 30px;
			padding: 0 20px;
			padding-bottom: 0;
			display: flex;
			justify-content: space-around;
			/* margin-top: 10px; */
		}
		.jiankongFont{
			width: 16px;
			height: 16px;
			
		}
		.btomFont_one{
			display: flex;
			align-items: center;
		}
		.btomFont_one>view{
			color: #93A0AD;
			font-size: 14px;
			margin-left: 6px;
		}
		.btomFont_one .btomActive{
			color: #007AFF;
		}
		.noData{
			width: 100%;
			background-color: #fff;
			padding-top: 44.5px;
			height: 100vh;
			/* padding-left: 68.5px; */
		}
		.noData .imgBox{
			width: 100%;
			height: 284px !important; 
			display: flex;
			justify-content: center;
		}
		.noData .imgView .noDataImg{
			width: 284px;
			height: 284px;
		}
		.smallText{
			color: #28435D;
			font-size: 14px;
			width: 100%;
			text-align: center;
		}
		.attention{
			width: 162.5px;
			height: 41px;
			line-height: 41px;
			background-color:#3D84FE ;
			color: #fff;
			font-size: 14px;
			text-align: center;
			border-radius: 5px;
			margin-top: 20px;
		}
		.attentionBox{
			width: 100%;
			display: flex;
			justify-content: center;
		}
</style>
